import { getAllCompositionGuides } from '@/lib/data';
import Link from 'next/link';

// 获取阵容指南数据
const guides = getAllCompositionGuides();

export default function CompositionPage() {
  return (
    <div className="space-y-12">
      <h1 className="text-3xl font-bold border-b pb-4">阵容搭配建议</h1>

      {guides.map(guide => (
        <div key={guide.id} className="bg-white shadow-lg rounded-lg p-8">
          <h2 className="text-2xl font-bold text-blue-700 mb-4">{guide.name}</h2>
          <p className="text-gray-600 mb-6">{guide.description}</p>

          <div className="mb-6">
            <h3 className="text-xl font-semibold mb-2">核心角色定位</h3>
            <div className="flex flex-wrap gap-2">
              {guide.roles.map(role => (
                <span key={role} className="px-3 py-1 text-sm bg-gray-200 text-gray-800 rounded-full">
                  {role}
                </span>
              ))}
            </div>
          </div>

          <div className="mb-6">
            <h3 className="text-xl font-semibold mb-2">阵容优缺点</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h4 className="font-medium text-green-600 mb-1">优点:</h4>
                <ul className="list-disc list-inside text-gray-700 space-y-1">
                  {guide.strengths.map(strength => <li key={strength}>{strength}</li>)}
                </ul>
              </div>
              <div>
                <h4 className="font-medium text-red-600 mb-1">缺点:</h4>
                <ul className="list-disc list-inside text-gray-700 space-y-1">
                  {guide.weaknesses.map(weakness => <li key={weakness}>{weakness}</li>)}
                </ul>
              </div>
            </div>
          </div>

          <div>
            <h3 className="text-xl font-semibold mb-2">英雄选择示例</h3>
            <div className="space-y-2">
              {guide.example_heroes.map(example => (
                <div key={example.role} className="flex items-center">
                  <span className="font-medium w-24 flex-shrink-0">{example.role}:</span>
                  <span className="text-gray-700">{example.heroes.join(", ")}</span>
                </div>
              ))}
            </div>
            <p className="text-sm text-gray-500 mt-2">*以上仅为示例，实际选择需根据对局情况调整。</p>
          </div>

        </div>
      ))}
    </div>
  );
}
